<template>
  <div>
    <div id="dashBoard" ref="dashBoard" style="height:238px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'DashBoard',
  props: {
    chartData: Array
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.dashBoard)
      const chartName = this.chartData[0].name
      const codeName = this.chartData[0].code
      const scale = (this.chartData[0].value / 100).toFixed(2)
      var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#5CF9FE' // 0% 处的颜色
        },
        {
          offset: 0.17,
          color: '#468EFD' // 100% 处的颜色
        },
        {
          offset: 0.9,
          color: '#468EFD' // 100% 处的颜色
        },
        {
          offset: 1,
          color: '#5CF9FE' // 100% 处的颜色
        }
      ])
      var colorSet = [
        [scale, color],
        [1, '#15337C']
      ]
      var rich = {
        white: {
          fontSize: 14,
          color: 'rgb(22,152,190)',
          fontWeight: 'normal',
          padding: [20, 0, 0, 0]
        },
        bule: {
          fontSize: 50,
          fontFamily: 'DINBold',
          color: '#fff',
          fontWeight: '700',
          padding: [0, 0, 0, 0]
        },
        radius: {
          width: 140,
          height: 40,
          borderWidth: 1,
          borderColor: '#0092F2',
          fontSize: 20,
          color: '#fff',
          backgroundColor: '#1B215B',
          borderRadius: 20,
          textAlign: 'center',
          position: 'bottom'
        },
        size: {
          height: 400,
          padding: [100, 0, 0, 0]
        }
      }
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        // title: {
        //   text: '减碳量',
        //   top: 16,
        //   left: 16,
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14'
        //   }
        // },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            type: 'gauge',
            radius: '70%',
            startAngle: '225',
            endAngle: '-45',
            min: 0,
            max: 100,
            pointer: {
              show: false
            },
            detail: {
              formatter (value) {
                var num = Math.round(value)
                return '{bule|' + num + '}\n{white|吨 ' + codeName + '}\n{radius|' + chartName + '}'
              },
              padding: [100, 0, 0, 0],
              rich: rich,
              offsetCenter: ['0%', '0%']
            },
            data: this.chartData,
            title: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                width: 25,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 25,
              lineStyle: {
                color: '#00377a',
                width: 2,
                type: 'solid'
              }
            },
            axisLabel: {
              show: false
            }
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
